<script setup lang="ts">
  import useListStore from '../../../store/listStore'
  const listStore = useListStore()
</script>

<template>
  <div class="swiper-container">
    <van-swipe 
      class="my-swipe" 
      :autoplay="3000" 
      indicator-color="white"
    >
      <van-swipe-item  v-for="(item,index) in listStore.filteredList(5)" :key="index">
        <img :src="item.img" :alt="item.name" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<style lang="scss">
.swiper-container {
  height: 0;
  font-size: 0;
  padding-bottom: 66.6666667%;
}
.my-swipe .van-swipe-item {
  img {
    width: 100%;
  }
}
</style>